<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <script src="../js/swiper-bundle.min.js"></script>
    <style>
        .carousel_flex {
            display: flex;
        }

        .carousel_left,
        .carousel_right {
            box-sizing: border-box;
        }

        .carousel_left {
            width: 45%;
        }

        .carousel_right {
            width: 65%;
            overflow: hidden;
        }

        .carousel_flex_slide .carousel_flex_bg {
            width: 100%;
        }

        .carousel_flex_navigation {
            width: 100%;
            height: 40px;
            position: absolute;
            display: flex;
            margin-top: -25px;
            justify-content: space-between;
            top: 50%;
            z-index: 5;
        }

        .carousel_flex_nav_next,
        .carousel_flex_nav_prev,
        .carousel_flex_nav_prev:focus,
        .carousel_flex_nav_next:focus {
            border-radius: 20px;
            height: 40px;
            display: block;
            outline: none;
            background-color: rgba(255, 255, 255, 0.5);
            width: 40px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 70% 70%;
        }

        .carousel_flex_nav_next {
            background-image: url(../images/carousel_left.png);
            transform: rotate(180deg);
        }

        .carousel_flex_nav_prev {
            background-image: url(../images/carousel_left.png);
        }

        .carousel_right_container {
            position: relative;
            width: 100%;
        }

        .carousel_left_p {
            width: 363px;
            display: block;
            font-size: var(--f_text);
            line-height: var(--l_text);
            color: var(--c_text);
        }

        @media (max-width:1240px) {
            .carousel_right {
                width: 100%;
            }

            .carousel_flex {
                flex-wrap: wrap;
            }

            .carousel_left_p {
                width: 100%;
            }

            .carousel_left {
                width: 100%;
                margin-bottom: 30px;
            }

            .carousel_left .public_title {
                text-align: center;
            }

            .carousel_flex_slide img {
                height: 335px;
                object-fit: cover;
            }
        }
    </style>
    <script>
        $(function () {
            let mysipter = getSwiperInstance()
            window.addEventListener('resize', function () {
                mysipter.destroy()
                mysipter = getSwiperInstance()
            })
            function getSwiperInstance() {
                return new Swiper('.carousel_right_container', {
                    autoplay: true,
                    loop: true,
                    slideClass: 'swiper-slide',
                    slidesPerView: getDynamicSlides(),
                    spaceBetween: 20,
                    navigation: {
                        nextEl: '.carousel_flex_nav_next',
                        prevEl: '.carousel_flex_nav_prev',
                    },
                })
            }
            function getDynamicSlides() {
                if (window.innerWidth >= 768) {
                    return 3
                } else if (window.innerWidth >= 500) {
                    return 2
                } else {
                    return 1
                }
            }
        })
    </script>
</head>

<body>
    <div class="carousel public_width modular">
        <div class="carousel_flex">
            <div class="carousel_left">
                <div class="public_title">
                    <h2>雕塑产品</h2>
                    <p class="carousel_left_p">PRODUCTS</p>
                </div>
                <a href="">
                    <p class="carousel_left_p">XX雕塑公司专注于城市、企业、商业、人物、不锈钢、园林、肖像等创意主题雕塑设计，
                        XX雕塑公司结合雕塑设计、生产、加工、运输、安装、
                        售后等一体化服务以及艺术活动组织策划的全方位整体解决方案的综合型文化企业，
                        拥有2000平米北京雕塑加工厂与2000平米山东雕塑加工厂等服务工厂...
                    </p>
                </a>
            </div>
            <div class="carousel_right">
                <div class="carousel_right_container">
                    <ul class="swiper-wrapper carousel_flex_wrapper">
                        <li class="swiper-slide carousel_flex_slide">
                            <a href=""><img class="carousel_flex_bg"
                                    src="https://21217127.s61i.faiusr.com/2/AD0I5-6OChACGAAg_86c8wUo87DYhgMwgAY4jwk.jpg.webp"
                                    alt=""></a>
                        </li>
                        <li class="swiper-slide carousel_flex_slide">
                            <a href="">
                                <img class="carousel_flex_bg"
                                    src="https://21217127.s61i.faiusr.com/2/AD0I5-6OChACGAAg_86c8wUoqI_TlgYwgAY4jwk.jpg.webp"
                                    alt=""></a>
                        </li>
                        <li class="swiper-slide carousel_flex_slide">
                            <a href="">
                                <img class="carousel_flex_bg"
                                    src="https://21217127.s61i.faiusr.com/2/AD0I5-6OChACGAAg_86c8wUou8-OswUwgAY4jwk.jpg.webp"
                                    alt="">
                        </li></a>
                    </ul>
                    <div class="carousel_flex_navigation">
                        <span class="carousel_flex_nav_prev"></span>
                        <span class="carousel_flex_nav_next"></span>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>

</html>